import styles from './index.module.scss'
import React, { Component } from 'react'
import classNames from 'classnames'
import {withRouter} from 'react-router-dom'

function HouseItem ({ 
  houseCode,
  houseImg,
  title,
  desc,
  tags,
  price,
  history,
  style
}) {
  
  return (
    <div
      // 渲染虚拟化长列表一定要父传子style,因为是通过修改绝对定位的值实现长列表的复用的
      style={style} 
      className={styles.house}
      onClick={() => history.push(`/detail/${houseCode}`)}>
      <div className={styles.imgWrap}>
        <img 
          className={styles.img}
          src={`${process.env.REACT_APP_BASEURL}${houseImg}`} alt=""/>
      </div>
      <div className={styles.content}>
        <h3 className={styles.title}>{title}</h3>
        <div className={styles.desc}>{desc}</div>
        <div>
          {tags.map((item, index) => {
            const tagName = `tag${(index % 3) + 1}`
            return (
              <span
                key={item}
                className={classNames(styles.tag, styles[tagName])}>
                  {item}
              </span>
            )
          })}
        </div>
        <div className={styles.price}>
        <span className={styles.priceNum}>{price}</span> 元/月
        </div>
      </div>
    </div>
  )
 
}

export default withRouter(HouseItem)